/// <reference types="next" />
/// <reference types="next/image-types/global" />

'use client'

import { useEffect, useState } from 'react';
import Image from 'next/image'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { API_CONFIG } from './config';

interface Product {
  id: number;
  name: string;
  image: string;
  stock: number;
  price: string;
}

export default function Home() {
  const router = useRouter()
  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([])

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const apiUrl = '/api/goods';
        console.log('实际请求的接口完整路由:', apiUrl);
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({}),
        });
        const data = await response.json();
        if (Array.isArray(data)) {
          // 拼接域名
          const productsWithFullImageUrl = data.map(product => ({
            ...product,
            image: `${API_CONFIG.BASE_URL}${product.image}`
          }));
          console.log(productsWithFullImageUrl)
          setFeaturedProducts(productsWithFullImageUrl);
        } else {
          console.error('Expected an array but got:', data);
          setFeaturedProducts([]);
        }
      } catch (error) {
        console.error('Error fetching products:', error);
        setFeaturedProducts([]);
      }
    };

    fetchProducts();
  }, []);

  return (
    <main className="min-h-screen">
      {/* Hero Section */}
      <div className="relative gradient-bg text-white" style={{ backgroundImage: `url('${API_CONFIG.BASE_URL}/uploads/20250427212714.jpg')`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
        <div className="container py-24">
          <h1 className="text-5xl font-bold mb-6 text-pink">
            Best Options for Choose a gift Online
          </h1>
          <p className="text-xl mb-8 max-w-2xl">
            Discover the best value-for-money sources for purchasing high-quality gift, 
            offering great deals and trusted brands to ensure satisfaction and savings.
          </p>
          <div className="mt-8">
            <Link 
              href="/shop"
              className="inline-block bg-[#9b81c2] text-white px-6 py-2 rounded hover:bg-[#7b5fa2] transition-colors"
            >
              Shop Now
            </Link>
          </div>
        </div>
      </div>

      {/* Featured Products */}
      <section className="py-16">
        <div className="container">
          <h2 className="text-3xl font-bold mb-12 text-center text-pink">Featured Products</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredProducts.map((product) => (
              <div key={product.id} className="card border-pink">
                <div className="aspect-w-1 aspect-h-1 relative" style={{ height: '300px' }}>
                  <Image
                    src={product.image}
                    alt={product.name}
                    fill
                    className="object-cover"
                    priority
                  />
                </div>
                <div className="p-6">
                  <h3 className="text-lg font-semibold mb-2 hover-pink">{product.name}</h3>
                  <p className="text-gray-600 mb-4">Stock: {product.stock}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xl font-bold text-pink">${product.price}</span>
                    <Link href={`/shop/${product.id}`} className="inline-block bg-[#ff4d8c] text-white px-4 py-1 rounded hover:bg-[#ff3377] transition-colors">
                      View Details
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="gradient-bg py-16" style={{ backgroundImage: `url('${API_CONFIG.BASE_URL}/uploads/20250427212714.jpg')`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
        <div className="container">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4 text-pink">PREMIUM QUALITY</h3>
              <p className="text-white">
                Enjoy premium quality gift with rigorous quality control standards.
              </p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4 text-pink">EXCLUSIVE PRICE</h3>
              <p className="text-white">
                Get the best value for your money with competitive pricing and exclusive discounts.
              </p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4 text-pink">TOP SERVICE</h3>
              <p className="text-white">
                Experience exceptional customer service and a seamless shopping experience.
              </p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4 text-pink">RICH VARIETY</h3>
              <p className="text-white">
                Discover a wide variety of unique and satisfying flavors for every palate.
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}
